<template>
	<view>
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 我的顶部导航模块 -->
		<view class="waterfall" :style="{ marginTop: statusBarHeight + 'px' }">
			<!--抢单 -->
			<view class="quit">
				<view class="public-h5">同时最多抢单数：<text class="public-red public-h5">0/0</text></view>
				<view class="quit-btn">完成代付后，可继续代付抢单</view>
			</view>
			<!--代付返佣 -->
			<view class="functional-block">
				<view class="unction-label">
					<view class="replace-title">代付总返佣</view>
					<view class="replace-nub public-h7">{{userAllInfo.col_today_total_rebate}}</view>
				</view>
				<view class="unction-label">
					<view class="replace-title">我的代付返佣</view>
					<view class="replace-nub public-h7">{{userAllInfo.col_today_my_rebate}}</view>
				</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<!-- 选项卡 -->
		<view class="Tab">
			<view class="tabs-container">
				<view v-for="(item, index) in tabs" :key="index" class="tab-item"
					:class="{ chooseTab: activeTab === index }" @click="selectTab(index)" :id="'tab-' + index">
					{{ item }}
				</view>
			</view>
			<!-- <view class="Historical-order" @click="sift">
				<view>筛选</view>
				<image class="sift-img" src="/static/commonImg/saixun.png"></image>
			</view> -->
		</view>
		<!-- 内容部分 -->
		<!-- 抢单模板 -->
		<template v-if="activeTab==0">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>姓名：<text class="fund-nub">{{item.real_name}}</text></view>
							<view>手续：<text class="fund-nub">{{item.fees_money}}</text></view>
						</view>
						<!-- <view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view> -->
						<!-- <view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.bank_card)">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
							</view>
						</view> -->
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
						<view class="gopay-box"><view class="gopay2" @click="grabOrder(item.id)">抢单</view></view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>
		<!-- 已抢单模板 -->
		<template v-if="activeTab==1">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<!-- <view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">点击图片：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
						</view> -->
						<view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.bank_card)">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
								<!-- <image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image> -->
							</view>
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
						<view class="gopay-box"><view class="gopay" @click="tradePassword('pay',item)">去支付</view></view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>
		<!-- 已支付模板 -->
		<template v-if="activeTab==2">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
								<!-- <image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image> -->
							</view>
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>
		<!-- 已完成模板 -->
		<template v-if="activeTab==3">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
								<!-- <image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image> -->
							</view>
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>
		<!-- 已失败模板 -->
		<template v-if="activeTab==4">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
								<!-- <image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image> -->
							</view>
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>
		
		<!-- 已冻结模板 -->
		<template v-if="activeTab==5">
			<view v-if="dataList && dataList.length>0">
				<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
					scroll-with-animation="true">
					<view class="trade-records" v-for="(item,index) in dataList" :key="index">
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image"
										style="margin-right: 10rpx;" src="/static/payImg/zhifubao.png"
										:src="payimg(item.bank_type_id)">
									</image>
									<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>订单金额：<text class="fund-nub">{{item.order_money}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>返佣金额：<text class="fund-nub">{{item.payment_money}}</text></view>
							<view>返佣比例：<text class="fund-nub">{{item.payment_rebate}}%</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view>收款账号：<text class="public-black6">{{item.bank_card}}</text></view>
							</view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">{{item.real_name}}</text></view>
								<!-- <image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image> -->
							</view>
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
					<!-- 加载状态提示 -->
					<view v-if="isLoading" class="loading-text">加载中...</view>
					<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
				</scroll-view>
			</view>
			<EmptyRecord v-else></EmptyRecord>
		</template>

		<!-- 温馨提示弹窗组件 -->
		<PromptPopup :pointOut="pointOut" ref="popupOut" :itemData="itemData" :option="option" @confirm="collectMoney" />
		<!-- 筛选弹窗组件 -->
		<filter-popup :show="showFilter" :filterData="filterData" @close="showFilter = false"
			@update-order-types="handleOrderTypesUpdate" @update-order-status="handleOrderStatusUpdate"
			@pick-time="handlePickTime" @reset="resetFilter" @confirm="applyFilter" />
	</view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss"></style>